$c-slider: mix($c-secondary, $c-bg-box, 90%) !default;
$slider-width: 12px;

.ui-slider {
  background: $c-slider;
  position: relative;
  text-align: left;
  cursor: pointer;
}

.ui-widget-header {
  @extend %box-radius;

  width: $slider-width;
  bottom: 0;
  background: $c-slider;
}

.ui-widget-content {
  @extend %box-radius;

  background: c-dimmer($c-slider, 70%);
}

.ui-slider-handle {
  background: $c-slider;
  position: absolute;
  z-index: 2;
  width: 23px;
  height: 23px;
  cursor: pointer;
  margin: 0 0 -10px -5.5px;
  border-radius: 50%;

  &:hover,
  &:active,
  &:focus {
    box-shadow: 0 0 0 9px fade-out($c-slider, 0.85);
    outline: 0;
  }
}

.ui-slider .ui-slider-range {
  position: absolute;

  // z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider-horizontal {
  height: $slider-width;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -5.5px;
  margin-left: -9px;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}
